<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.active{
			background-color: aqua;
		}
		.text-danger{
			color: red;
		}
		</style>
	</head>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<div :class="{'active':isActive, 'text-danger':hasError}">
				div1
			</div>
			<div :class="classObject">
				div2
			</div>
			<div class="classObject">
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: '#app',
			data:{
				isActive:true,
				hasError:false,
				// classObject:{
				// 	isActive:true,
				// 	hasError:false,
				// }
			},
			computed:{
				classObject:function(){
					return {active:this.isActive,'text-danger':this.hasError}
				}
			}
		})
		
	</script>
</html>


